﻿@page "/chart/remote-data"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Charts
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the way in which the Chart component is bound to the remote service. The data source of the chart is bound to remote data using the DataManager component.</p>
</SampleDescription>
<ActionDescription>
    <p>The Chart supports data binding. The DataManager component can be used to configure the Chart to bind remote data.</p>
    <p>The DataManager, which acts as an interface between the service endpoint and the Chart, will require the minimum information below to interact properly with the service endpoint.</p>
    <ul>
        <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url'>SfDataManager.Url</a></code> - Defines the service endpoint to fetch the data.</li>
        <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor'>SfDataManager.Adaptor</a></code> - Defines the adaptor option. By default, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.UrlAdaptor.html'>ODataAdaptor</a></code> is used for remote binding.</li>
    </ul>
    <p>Adaptor is responsible for processing the response and request from/to the service endpoint. The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.html'>Syncfusion.Blazor.Data</a></code> namespace provides some pre-defined adaptors which are designed to interact with particular service endpoints. The pre-defined adaptors are,</p>
    <ul>
        <li><strong>UrlAdaptor</strong> - Use this to interact with any remote service. This is the base adaptor for all remote based adaptors.</li>
        <li><strong>ODataAdaptor</strong>- Use this to interact with OData endpoints.</li>
        <li><strong>ODataV4Adaptor</strong> - Use this to interact with OData V4 endpoints.</li>
        <li><strong>WebApiAdaptor</strong> - Use this to interact with Web API created under OData standards.</li>
    </ul>
    <p>In this demo, remote data is bound by assigning service data as an instance of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html'>DataManager</a></code> component and a query.</p>
    <p>More information about the remote data binding can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/working-with-data/#remote-data'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Query="new Query().Take(5)" Title="Food Vs Price" Theme="@Theme">
        <SfDataManager Url="https://mvc.syncfusion.com/Services/Northwnd.svc/Foods"></SfDataManager>
        <ChartPrimaryXAxis Title="Foods" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"
                           RangePadding="ChartRangePadding.Additional">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartSeriesCollection>
            <ChartSeries XName="ItemName" YName="Price" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    protected override void OnInitialized()
    {
        this.SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        this.SetTheme(args);
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

}